Swift/1.1 "Hallo Welt"
Eine "Hallo Welt"-Beispielanwendung mit XCode In diesem Abschnitt wird die Erstellung einer einfachen Anwendung für iOs behandelt, in welcher ein Label '(also ein Element zur Darstellung eines einfachen Texts / einer Beschriftung) und ein '''Button '(eine Taste, welche eine Beschriftung trägt) eingefügt wird. Falls der Benutzer auf dem Display des Handys / iPads den Button berührt, soll ein Ereignis ausgelöst werden, welches den Text des Labels zu "Hallo Welt" verändert. Dies ist der traditionelle Weg, das Lernen einer Programmiersprache zu beginnen. Der Einfachheit halber wird im folgenden jeder Schritt mir einer eigenen Überschrift versehen, um eine klare Gliederung der Schritte zu erzielen. Man beginnt wie folgt: Starten von XCode und erstellen eines neuen Projekts Zuerst ruft man XCode auf, indem man auf das Symbol des Programms in der Symbolleiste aufruft. Alternativ kann man auch die Spotlight-Suche verwenden, indem man die Tastenkombination '''Cmd ⌘+ Leertaste 'verwendet und "XCode" als Suchbegriff eingibt, worauf der Link zum Programm in der Trefferliste erscheint. Im Willkommen-Bildschirm klickt man nun auf den Eintrag "'Create a new Xcode Project". Datei:XCode_Create_New_Project.png Sollte der Willkommen-Bildschirm nicht angezeigt werden, so kann man ein neues Projekt mit der Tastenkombination Shift '''+ '''Cmd ⌘+ N'. Alternativ kann man auch aus dem Hauptmenü von XCode "'File", dann "New" und dann "Project" auswählen. Datei:XCode_Create_New_Project_2.png Sollte der Willkommen-Bildschirm von XCode nicht mehr angezeigt werden, so kann dieser mit der Tastenkombination Shift '''+ '''Cmd ⌘+ 1''' angezeigt werden. Die Vorlage für unser Projekt wählen Nachdem man ein neues Projekt erstellt hat, will XCode wissen, für welches System (iOs, watchOS, tvOS oder CrossPlatform) man sein Projekt programmieren will. Weiterhin muss man entscheiden, mit welcher Vorlage man starten will und wie das Programm / die App dann aussehen soll. In diesem Fall wählen wir *'iOs '''aus, da wir eine App für ein iPhone/iPad programmieren wollen und *wählen die Vorlage "'Single View" aus, da wir nur eine Seite in unserer App brauchen. Haben wir das ausgewählt, dann klicken wir auf die Taste "Next". Datei:XCode_New_Single_View_App_iOs.png Die Optionen für unser Projekt wählen Nachdem wir in der Auswahl der Vorlage für unser Projekt auf die Taste "Next" geklickt haben, gelangen wir zum Fenster mit den Auswahl der Optionen für unser neues Projekt: Datei:XCode_New_Single_View_App_iOs_2.png Die Eintragungen / Einstellungen in diesem Dialog haben folgende Bedeutung (bitte an der roten Nummer orientieren): #'Product Name': Dies stellt den Namen unserer App dar. Unter diesem Namen wird die App bei Bereitstellung im App Store angezeigt. #'Team': Unter dem Team kann man dem Projekt eine Apple-ID zuweisen, unter welcher man das Programm im App Store hochladen kann. Hierbei dreht es sich um das Thema Vertrieb unter einem Apple Developer Account (falls man seine App im App Store verkaufen will, so bekommt man durch einen Apple Developer Account, welcher 99 US-$ im Jahr kostet, ein Provisioning-File). Weiterhin benötigt man eine Apple-ID, wenn man seine App auf einem extern verbundenen iPhone/iPad testen will. Im Moment ist dies nicht interessant, weshalb wir dies außer acht lassen. #'Organization Name': Hier kommt der Name der Firma hinein, welche die App vertreibt / erstellt hat. Falls es sich um eine Einzelperson handelt, so gehört deren Name in dieses Feld. #'Organization Identifier': In dieses Feld gehört die Domäne der Internetpräsenz der Organisation in umgekehrter Reihenfolge. Ist die Homepage der Firma unter "meinefirma.de" zu erreichen, so gehört hier "de.meinefirma" als ID eingetragen. #'Bundle Identifier': Diese ID wird von XCode automatisch erstellt und dient der Identifikation der App. Diese kann nicht verändert werden. #'Language': Hier wählt man die gewünschte Programmiersprache des Projekts aus. Es ist im Falle von iOS die Programmiersprache Swift sowie Objective-C möglich. Falls man für OS X ein Programm entwickeln will, ist weiterhin die Programmierung mit der Programmiersprache C++ möglich. Wir wählen hier die Programmiersprache Swift aus. #'Devices': Hier kann man zwischen iPhone, iPad und Universal auswählen. In diesem Fall wählt man "Unversal" aus, wodurch man diese App auf dem iPhone sowie auch auf dem iPad laufen lassen kann. #'Auswahl der einzufügenden Module': Hier kann man die Module auswählen, welche dem Projekt hinzugefügt werden sollen. Es handelt sich hierbei um folgendes: #*'Core Data': Module zur Verwendung der Kernfunktionen wie Datenspeicherung, automatische Datenüberprüfung u. v. m. für XML, SQLite oder Binärdaten. Für weitere Informationen siehe Wikipedia: Core Data #*'Unit Tests': Modul zur Fehlersuche / Debugging des Quellcodes / der Daten einer App. Damit kann man Klassen und Methoden des Quellcodes auf Fehler überprüfen. Für weitere Informationen: Apple: Testing with XCode #*'UI Tests': Modul zur Fehlersuche in der Benutzeroberfläche der App. Für weitere Informationen: Apple: User Interface Testing Wir benötigen für eine einfache App wie die unsere im Moment keine zusätzlichen Module, weshalb wir die 3 Checkboxen nicht auswählen. Wenn die Einstellungen eingegeben sind, klicken wir auf die Taste "Next". Den Speicherort für unser Projekt festlegen Als nächstes will XCode wissen, in welchen Ordner es unser neues Projekt speichern soll. Hierzu erscheint folgender Dialog: Datei:XCode_New_Single_View_App_iOs_3.png Zuerst navigiert man zum Zielordner und / oder erstellt über die Taste "New Folder" einen neuen Ordner, welcher dann das Projekt enthält. Mit "Create Git repository" kann man XCode anweisen, eine Versionsverwaltung für unser Projekt via Git zu erstellen. Dies benötigen wir allerdings im Moment nicht, da wir nur eine Version unseres Programms erstellen, weshalb man dies abwählen kann. Anschließend klickt man auf die Taste "Create", um unser Projekt am ausgewähltem Ort zu speichern. Erstellen der Benutzeroberfläche Nachdem wir den Speicherort unseres Projekts bestätigt haben, wird dieses dort abgespeichert und geöffnet, wonach XCode mit dem Einstellungsfenster des Projekts angezeigt wird. Wir belassen die Einstellungen, wie sie sind und klicken links im Navigationsbereich auf "Main.storyboard", welches die Benutzeroberfläche darstellt, welches beim Start der App angezeigt wird. 500px Nun öffnet sich der Interface-Designer und zeigt uns die sog. Szene der Benutzeroberfläche an. Darin sind alle Elemente enthalten, welche in die Benutzeroberfläche eingefügt werden. Als nächstes stellt man sicher, dass die Object Library angezeigt wird, indem wir am rechten Rand (der sog. "Utility Area") das Symbol mit dem eingekreisten Quadrat auswählen. Danach scrollt man so lange in den Objekten nach unten, bis man die Objekte Label 'und '''Button '''sieht, da man diese für das Benutzerinterface benötigt. 500px Nun nimmt man das Label mit der linken Maustaste und zieht es per Drag & Drop auf den View Controller in der Mitte des Bildschirms, um es der Benutzeroberfläche hinzuzufügen. Wenn man das Label mittig auf den View Controller zieht, so erscheint eine blaue Linie als Zentrierhilfe. Das selbe macht man nun mit dem Button und platziert diesen etwas unterhalb des Labels. Datei:XCode_New_Single_View_App_iOs_6.png Jetzt sind beide hinzugefügten Objekte auch links in der Ansicht des Szene-Baums zu sehen. Datei:XCode_New_Single_View_App_iOs_7.png Als nächstes führt man einen Linksklick auf den Button aus und gibt ihm im Attributes Inspector den Titel "'Bitte drücken", um ihn zu beschriften. Alternativ kann man einen Doppelklick auf den Button ausführen, wobei der Titel direkt editierbar wird. Nachdem der Titel geändert wurde, muss man die Größe und Position des Buttons noch anpassen, da der Text sonst gekürzt wird und der Button seine Größe nicht automatisch anpasst. Automatische Platzierung mittels Constraints Da ein iPad eine andere Bildschirmgröße hat wie ein iPhone, müssen für die Platzierung von Objekten (in unserem Fall für das Label und den Button) sog. Contraints ''(zu Deutsch "Zwangsbedingungen") angegeben werden. Hierbei geht es im die proportinalen Platzierungen auf dem Bildschirm; wie in etwa "Platziere dies horizontal zentriert" usw. Das Label vertikal zentrieren Zuerst wollen wir das Label vertikal im ViewController platzieren. Hierzu wählt man zuerst das Label aus, sodass es eingerahmt ist. Nun klickt man der rechten Maustaste auf das Label und hält die rechte Maustaste aber gedrückt. Es wird nun ein blauer Strich sichtbar, welche die Verbindung darstellt, mit welchem Objekt das Constraint verknüpft werden soll. Nun bewegt man mit gedrückter rechter Maustaste die Maus etwas außerhalb des Labels, damit der ViewController blau markiert wird: Datei:XCode_New_Single_View_App_iOs_8.png Somit geben wir an, dass eine Verküpfung des Labels mit dem ViewController gewünscht ist. Wenn man nun die rechte Maustaste über dem blau markierten ViewController auslässt, so erscheint das Popup-Menü für die Auswahl der Constraints. Da wir das Label immer vertikal im ViewController platziert haben wollen (egal ob iPhone oder iPad), so wählen wir im Popup-Menü den Eintrag "'Center Vertically in Container'". Datei:XCode_New_Single_View_App_iOs_9.png Nachdem wir das Contraint festgelegt haben, wird dieses bei der Selektion des Label in XCode auch angezeigt: Datei:XCode_New_Single_View_App_iOs_10.png Das Label ist mit einem rechteckigen rotem Rahmen versehen und es erscheint eine horizontale Linie mit der Angabe des Werts -203. Dies ist der berechnete Wert, um welches das Label vertikal verschoben werden muss, damit es vertikal proportional an der selben Stelle auf dem ViewController erscheint. Dieser Wert gilt in diesem Fall für die Ansicht des iPhone 6s. Man kann zusehen, wie sich der Wert verändert, wenn man verschiedene Geräte in der Auswahl unterhalb des Interface Builders auswählt: Datei:XCode_New_Single_View_App_iOs_11.png Wenn man nun das Gerät sowie die Ausrichtung ("Orientation") ändert, so ändert sich auch der Wert an der roten Linie, da das Label immer um einen unterschiedlichen Wert verschoben werden muss, wenn sich die Bildschirmauflösung ändert. Das Label horizontal zentriert platzieren Nun klickt man wieder mit der rechten Maustaste auf das Label und hält diese gedrückt. Danach zieht man wie bei der horizontalen Zentrierung eine blaue Linie auf den ViewController und lässt die rechte Maustaste los, worauf das PopupMenü erscheint. Hier wählt man den Eintrag "'Center Horizontally in Container'". Hierauf erscheint bei selektiertem Label ebenfalls wieder Linie, welche diesmal jedoch blau ist und mittig durch das Label geht. Dies stellt das Constraint für die horizontale Zentrierung dar: Datei:XCode_New_Single_View_App_iOs_12.png Automatische Platzierung des Buttons Um den Button horizontal zu zentrieren, wählt man diesen an, klickt mit der rechten Maustaste darauf und zieht die blaue Linie nach unten, bis der ViewController blau dargestellt wird. Auch hier wählt man den Eintrag "'Center Horizontally in Container'". Wenn man aber nun den Button ebenfalls vertikal zentriert anzeigen lässt, so steht er bei der Ausführung der App genau über dem Label, da dieses auch vertikal zentriert dargestellt wird. Hierzu braucht man ein anderes Constraint. Man wählt den Button aus, klickt die rechte Maustaste und hält diese, wonach man eine blaue Linie etwas nach oben zieht, bis der ViewController wieder blau markiert wird. Nach dem Loslassen der rechten Maustaste wählt man den Eintrag "'Vertical Spacing to Top Layout Guide'". Hierauf erscheint das neue Constraint als blaue Abstandslinie im Interface Builder: Datei:XCode_New_Single_View_App_iOs_13.png Hier wird ein fester Abstand des Buttons zum oberen Bildschirmrand festgelegt und der Button wird immer zentriert dargestellt. Löschen falsch gesetzter Constraints Sollte mal etwas nicht funktionieren oder man will nur mit den Constraints experimentieren, so kann man diese wie folgt wieder löschen: *Zuerst wählt man mit der linken Maustaste das Objekt an, dessen Constraints gelöscht werden sollen. *Danach führt man im Interface Builder auf die Taste "'Resolve Auto Layout Issues'" einen Linksklick aus, worauf sich ein Popup-Menü öffnet. *Nun wählt man aus dem Popup-Menü den Eintrag "'Clear Constraints'" aus, um alle Constraints von dem gewählten Objekt zu löschen. Datei:XCode_New_Single_View_App_iOs_14.png Ein Ereignis zum Button hinzufügen Ein Ereignis wird ausgelöst/trifft ein, wenn z. B. ein Benutzer auf die Fläche eines Buttons tippt. Die Ereignisse werden in XCode ''Action ''genannt. Man kann sich etwas Platz schaffen, wenn man den Navigator-Bereich und den Utilities-Bereich ausblendet. Dies kann man erreichen, indem man rechts oben in XCode die linke und rechte Taste abwählt, so dass diese schwarz erscheinen.Datei:XCode_New_Single_View_App_iOs_15.png Anschließend öffnet man den Assistant Editor, indem man die Taste mit den zwei ineinander geschlungenen Kreisen rechts oben links neben den vorher beschriebenen Tasten anwählt.Datei:XCode_New_Single_View_App_iOs_16.png Nun öffnet sich der Assistant Editor und zeigt uns den Quellcode des ViewControllers an. Da wir den Text des Labels durch die Anwahl des Buttons ändern wollen, benötigen wir einen Verweis auf das Label im Quellcode. Hierzu wählt man zuerst das Label an, klickt mit der rechten Maustaste und hält diese gedrückt. Dann bewegt man die blaue Linie bis unter die Klassendeklaration des ViewController class ViewController: UIViewController { und lässt die rechte Maustaste los. Datei:XCode_New_Single_View_App_iOs_17.png Nachdem man die rechte Maustaste los gelassen hat, erscheint der Dialog zum einfügen eines Verweises in den Quellcode: Datei:XCode_New_Single_View_App_iOs_18.png Hier gibt man eine Benennung für den Verweis auf das Label an, mit der dieses Label später angesprochen werden kann. In diesem Beispiel wird der Verweis "'meinLabel'" genannt. Neulinge sollten, um Verwirrung zu vermeiden, dieser Benennung folgen. Nach der Eingabe des Namens klickt man mit der linken Maustaste auf die Taste "Connect", worauf im Code folgende Verknüpfung erstellt wird: @IBOutlet weak var meinLabel: UILabel! Zur Erklärung: *'@IBOutlet''' sagt aus, dass hier eine Verbindung zu einem Objekt deklariert wird. *'weak '''bedeutet, dass es sich um eine "weiche" Referenz auf ein Objekt / eine Variable handelt.Das bedeutet (im Gegensatz zum Schlüsselwort '''strong'), dass dieses Objekt nicht durch den Verweis durch eine Referenz darauf von ARC gelöscht werden kann. ARC ist das Speichermanagementsystem von Swift und steht für A'''utomatic '''R'eference 'C'ounting''. *'var '''sagt aus, dass es sich um eine Variable handelt. Da das Label nicht konstant und veränderbar ist, kann es kein Verweis auf eine Konstante sein, da dies zu einem Fehler führt. *'meinLabel ist der zugewiesene Name der Referenz, über welchen diese ansprechbar ist. *'UILabel '''ist die Bezeichnung des Typs, auf welchen die Referenz zeigt. (UILabel = 'U'''ser '''I'nterface Label'') Nun benötigen wir noch ein Ereignis für den Button, wenn der Benutzer diesen anwählt. Hierzu markiert man zuerst den Button und klickt die rechte Maustaste, welche man dann geklickt hält und eine blaue Linie unter die zuvor eingefügte Referenz auf das Label einfügt: Datei:XCode_New_Single_View_App_iOs_19.png Wenn man nun die rechte Maustaste loslässt, so erscheint der Dialog zum Einfügen eines neuen Ereignisses in den Quellcode: Datei:XCode_New_Single_View_App_iOs_20.png In diesem Dialog ändert man zuerst unter "Connection" die Art der Verknüpfung zu "Action". Als Namen des Ereignisses gibt man "bei Tastendruck" ein und klickt auf die Taste "Connect", wodurch XCode folgenden Code an der markierten Stelle einfügt: @IBAction func beiTastendruck (_ sender: AnyObject) { } Zur Erklärung: *'@IBAction' sagt aus, dass es sich hier um ein Ereignis handelt. In diesem Fall ist es das drücken des Buttons. *'func '''sagt aus, dass es sich um eine Funktion handelt, welche einen Quellcode ausführt, welcher sich zwischen der ersten, nach links geschweiften Klammer ("{") und der letzten, nach rechts geschweiften Klammer ("}") befindet. *'sender: AnyObject''' bedeutet, dass Objekte jeden Typs diese Funktion/dieses Ereignis aufrufen können Da zwischen den beiden geschweiften Klammern der Funktion noch kein Quellcode steht, fügt man diesen nun dort ein. Die Referenz auf das Label wurde "meinLabel" genannt und diese Referenz hat die Eigenschaft "text", mit welcher man die Beschriftung des Labels ändern kann. Da diese Beschriftung nach dem Anwählen des Buttons "Hallo Welt" sein soll, müssen wir dies im Quellcode zuweisen. Deshalb fügt man zwischen der ersten und der letzten geschweiften Klammer der Funktion folgenden Quellcode ein: meinLabel.text = "Hallo Welt!" Der gesamte Codeblock sollte also wie folgt aussehen: Datei:XCode_New_Single_View_App_iOs_21.png Um sich das Ergebnis im Emulator ansehen zu können, muss man zuerst in XCode im linken oberen Bereich das gewünschte Modell auswählen und anschließend auf die "Play"-Taste drücken, um den Emulator zu starten.Datei:XCode_New_Single_View_App_iOs_22.png Sobald der Emulator die App geladen hat und läuft, kann man mit der linken Maustaste auf die "Bitte drücken"-Taste klicken, worauf sich der Text des Labels in "Hallo Welt!" ändert: Datei:XCode_New_Single_View_App_iOs_23.png Ich hoffe, dass dieses Tutorial jemanden Hilfestellung für den Anfang mit Swift und XCode gegeben hat und würde mich über jede Rückmeldung freuen. Kategorie:Swift